<template>
  <div class="container" style="--gap: 4;">

    <LeftControls/>

    <PianoStage/>

  </div>
</template>


<script setup lang="ts">
  import LeftControls from '@/components/LeftControls.vue';
  import PianoStage from '@/components/PianoStage.vue';
  import { MAJOR_KEY } from '@/types/types';


  import { ref } from 'vue';
  import { provide } from 'vue';
  // 全局状态变量
  const major = ref('C');       // 调式

  provide(MAJOR_KEY, major);    // 注入后代组件（使用Symbol值作为key）

</script>

<style scoped lang="scss">
  .container {
    width: 100vw;
    height: 100vh;
    background-color: #333;
    display: flex;
  }
</style>

<style>
  /* 初始化样式 */
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: inherit;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: unset;
    font-weight: normal;
    margin: 0;
    padding: 0;
  }
</style>